<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich">

   <body>
      <ui:composition template="/templates/template.xhtml">

         <ui:define name="title">RichFaces Button/Link Sample</ui:define>

         <ui:define name="head">
            <style>
               .group {
                  padding: 6px;
               }
               /*.rfs-ctn*/ .wh_button_pane input,
               /*.rfs-ctn*/ .wh_button_pane input:hover,
               /*.rfs-ctn*/ .wh_button_pane input:active,
               /*.rfs-ctn*/ .wh_button_pane input:focus
               {
                  background-repeat: no-repeat;
                  background-position: 4px center;
                  border: 1px solid #777;
                  margin-right: 12px;
                  padding: 4px 6px 4px 20px;
                  width: 8em;
                  font-weight: bold;
                  vertical-align: top;
               }
               /*.rfs-ctn*/ .wh_button_pane input:hover {
                  background-color: #ddd;
                  border: 1px solid #666;
                  cursor: pointer;
               }
               /*.rfs-ctn*/ .wh_button_pane input[disabled],
               /*.rfs-ctn*/ .wh_button_pane input[disabled]:hover {
                  background-repeat: no-repeat;
                  background-position: 4px center;
                  background-color: #ddd;
                  border: 1px solid #ccc;
                  cursor: inherit;
                  color: #999;
               }
            </style>
         </ui:define>

         <ui:define name="body">

            <h:form prependId="false">
               <div class="group wh_button_pane">
                  <a4j:commandButton style="background-image: url('../images/icons/edit.gif');" value="New" execute="@this" action="#{myBean.action}" type="submit" render="output" />
                  <a4j:commandButton disabled="true" style="background-image: url('../images/icons/edit.gif');" value="Edit" execute="@this" action="#{myBean.action}" type="submit" render="output" />
                  <a4j:commandButton style="background-image: url('../images/icons/edit.gif');" value="Delete" execute="@this" action="#{myBean.action}" type="submit" render="output" />
               </div>
               <div class="group">
                  <h:panelGroup id="output">
                     <h:outputText value="#{myBean.name}" />
                  </h:panelGroup>
               </div>
            </h:form>

            <!-- explicitely set ajaxRendered="true" -->
            <a4j:outputPanel ajaxRendered="true" styleClass="group" layout="block">
               <h:outputText value="Requests: #{myBean.number}"/>
            </a4j:outputPanel>

         </ui:define>
      </ui:composition>
   </body>
</html>